<template>
  <div>
    <div :style="{ textAlign: 'right', marginBottom: '10px' }">
      <a-button type="primary" :disabled="!onSwitch" style="margin-right:10px;" @click="addRegulation">增加领取规则</a-button>
      <a-switch :loading="loading" :checked="onSwitch" checked-children="开" un-checked-children="关" @change="onChange" />
    </div>
    <s-table
      bordered
      ref="table"
      :row-key="(record) => record.id"
      :columns="rankColumns"
      :data="rankData"
      :showPagination="false"
    >
      <template slot="date" slot-scope="text,record">
        <a-tag color="red">{{record.date_lft}}</a-tag><a-tag color="blue">至</a-tag><a-tag color="red">{{record.date_rgt}}</a-tag>
      </template>
      <template slot="rank" slot-scope="text,record">
        业绩排名<a-tag color="red">{{record.ranking_lft}}</a-tag><a-tag color="blue">到</a-tag><a-tag color="red">{{record.ranking_rgt}}</a-tag>
      </template>
      <template slot="receive_num" slot-scope="text">
        <a-tag color="red">{{text}}</a-tag>
      </template>
      <template slot="action" slot-scope="text,record">
<!--        <a-button size="small" style="margin-right:10px;" type="primary">查看</a-button>-->
        <a-button size="small" type="danger" @click="delSetting(record.id)">删除</a-button>
      </template>
    </s-table>
    <a-modal
      title="领取规则设置"
      v-model="visible"
      :width="600"
      @ok="onSubmit"
      @cancel="onCancel"
    >
      <a-form-model
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item label="选择生效时间">
          <a-range-picker v-model="times" style="width:100%" @change="changeDate" />
        </a-form-model-item>
        <a-form-model-item label="排名初始" prop="ranking_lft">
          <a-input v-model="ruleForm.ranking_lft" placeholder="开始名次" />
        </a-form-model-item>
        <a-form-model-item label="排名结束" prop="ranking_rgt">
          <a-input v-model="ruleForm.ranking_rgt" placeholder="结束名次" />
        </a-form-model-item>
        <a-form-model-item label="可领取资源数" prop="receive_num">
          <a-input v-model="ruleForm.receive_num" placeholder="请选择资源可领取数" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { STable } from '@/components'
import { delReceive0, getAddReceive0, getReceive0, postAddReceive0 } from '@/api/receive'
import { getReceive0 as getReceiveBase, postReceive0 } from '@/api/schedule'

export default {
  components: {
    STable
  },
  name: 'AsRank',
  data () {
    return {
      rankColumns: [
        {
          title: '生效时间',
          dataIndex: 'date',
          scopedSlots: { customRender: 'date' }
        },
        {
          title: '排名区间',
          dataIndex: 'rank',
          scopedSlots: { customRender: 'rank' }
        },
        {
          title: '可领取条数',
          dataIndex: 'receive_num',
          scopedSlots: { customRender: 'receive_num' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      rankData: parameters => {
        return getReceive0(parameters).then(res => {
          return res.result
        })
      },
      receiveForm: {},
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
      visible: false,
      ruleForm: {},
      rules: {
        ranking_lft: [{ required: true, message: '初始名次必须填写', trigger: 'blur' }],
        ranking_rgt: [{ required: true, message: '结束名次必须填写', trigger: 'blur' }],
        receive_num: [{ required: true, message: '可领子资源数不能为空', trigger: 'blur' }]
      },
      times: [],
      loading: false,
      onSwitch: false
    }
  },
  created () {
    this.getReceiveStatus()
  },
  methods: {
    getReceiveStatus () {
      const app = this
      getReceiveBase().then(res => {
        if (res.status === 0) {
          if (res.result.receive_setting.receive_yj_ranking_enable === '1') {
            app.onSwitch = true
          } else {
            app.onSwitch = false
          }
        }
      })
    },
    onSubmit () {
      const app = this
      const data = app.ruleForm
      const form = {}
      for (const k in data) {
        form['setting_receive0[' + k + ']'] = data[k]
      }
      postAddReceive0(form).then(res => {
        if (res.status === 0) {
          app.onCancel()
          app.$refs.table.refresh(true)
          app.visible = false
        } else {
          app.$warning({
            title: res.msg
          })
        }
      })
    },
    onCancel () {
      this.ruleForm = {}
      this.visible = false
    },
    addRegulation () {
      getAddReceive0().then(res => {
        if (res.status === 0) {
          this.visible = true
        }
      })
    },
    changeDate (date, dateStrings) {
      this.ruleForm.date_lft = dateStrings[0]
      this.ruleForm.date_rgt = dateStrings[1]
    },
    delSetting (id) {
      const app = this
      app.$confirm({
        title: '是否删除此条规则',
        onOk: () => {
          delReceive0(id).then(() => {
            app.$refs.table.refresh(true)
          })
        }
      })
    },
    onChange (checked) {
      const app = this
      const data = {}
      if (checked) {
        data['receive_setting[receive_yj_ranking_enable]'] = '1'
        app.loading = true
        postReceive0(data).then(res => {
          app.getReceiveStatus()
        }).finally(() => {
          app.loading = false
        })
      } else {
        data['receive_setting[receive_yj_ranking_enable]'] = '0'
        app.loading = true
        postReceive0(data).then(res => {
          app.getReceiveStatus()
        }).finally(() => {
          app.loading = false
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
